<script>
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'

export default {
    data() {
        return {

        }
    },
    computed: {
        ...mapState(['count']),
        ...mapGetters(['dCount'])
    },
    methods: {
        ...mapMutations(['add']),
        ...mapActions(['addNumAction']),
        addClick() {
            // this.$store.commit('add')
            this.add()
        },
        addNumClick() {
            this.$store.commit('addNum', 5)
        },
        addNumActionClick() {
            // this.$store.dispatch('addNumAction', 5)
            this.addNumAction(5)
        }
    },
    mounted() {
        console.log(this.$store.state.count, this.$store.getters.dCount);
    },
}
</script>
<template>
    <div>
        <el-button @click="$store.commit('add')">加 1</el-button>
        <el-button @click="addClick">加 1</el-button>
        <el-button @click="$store.commit('addNum', 5)">加 5</el-button>
        <el-button @click="addNumClick">加 5</el-button>

        <el-button @click="addNumActionClick">异步增加 5</el-button>


        <h1>状态管理 State</h1>
        <h2>
            {{ $store.state.count }} --
            {{ count }}
        </h2>
        <hr />
        <h1>状态管理 getters</h1>
        <h2>
            {{ $store.getters.dCount }} --
            {{ dCount }}
        </h2>

        <hr />

        <el-button @click="$store.commit('changeName', '李四')">修改名称</el-button>
        <h1>
            {{ $store.state.user.name }}
        </h1>


    </div>
</template>
